<template>
  <el-card class="m-4 box-card" shadow="never">
    <div class="mb-4" style="align-items: center">
      <h4>反馈详情 [id-{{ useFeedbackInfoStoreHook().aqiFeedback.fbId }}]</h4>
    </div>

    <!-- 显示步骤 -->
    <div class="animate__animated animate__fadeInLeft">
      <el-steps
        class="mt-2, mb-8"
        style="max-width: 6000px"
        :active="activeStep"
        align-center
        finish-status="success"
      >
        <el-step title="反馈" description="监督员发起反馈" />
        <el-step title="指派" description="管理员指派反馈任务" />
        <el-step title="检测" description="网格检测员实地检测数据" />
        <el-step title="完成" description="管理员审核发布数据" />
      </el-steps>
    </div>
    <!-- 详情信息表单 -->
    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">监督员信息</h4></el-divider
    >
    <el-descriptions class="mb-4" :column="3" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            监督员姓名
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().monitor.monName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle"><PriceTag /></el-icon>
            监督员ID
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().monitor.monId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            监督员电话
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().monitor.monTel
        }}<el-icon
          class="copy-btn"
          style="color: dodgerblue; margin-left: 8px"
          onmouseout="this.style.color='dodgerblue'"
          onmouseover="this.style.color='gray'"
          @click="
            copyPhone(useFeedbackInfoStoreHook().monitor.monTel.toString())
          "
          ><CopyDocument
        /></el-icon>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            性别
          </div>
        </template>
        {{ getGenter(useFeedbackInfoStoreHook().monitor.monSex) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            家庭住址
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().monitor.monAddress }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">反馈情况</h4></el-divider
    >
    <el-descriptions class="margin-top" :column="4" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            反馈信息ID
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().aqiFeedback.fbId
        }}<el-icon
          class="copy-btn"
          style="color: dodgerblue; margin-left: 8px"
          onmouseout="this.style.color='dodgerblue'"
          onmouseover="this.style.color='gray'"
          @click="
            copyPhone(useFeedbackInfoStoreHook().aqiFeedback.fbId.toString())
          "
          ><CopyDocument
        /></el-icon>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            省份
          </div>
        </template>
        辽宁省
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            城市
          </div>
        </template>
        沈阳市
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            状态
          </div>
        </template>
        <el-tag
          v-if="useFeedbackInfoStoreHook().aqiFeedback.fbAssignState === 0"
          size="default"
          type="danger"
          effect="dark"
          >未指派</el-tag
        >
        <el-tag
          v-if="useFeedbackInfoStoreHook().aqiFeedback.fbAssignState === 1"
          size="default"
          type="success"
          effect="dark"
          >已指派</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Clock />
            </el-icon>
            反馈时间
          </div>
        </template>
        {{
          format(
            useFeedbackInfoStoreHook().aqiFeedback.fbTime,
            "yyyy-MM-dd HH:mm:ss"
          )
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            具体地址
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().aqiFeedback.fbAddress }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="mt-4" :column="1" size="default" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Odometer />
            </el-icon>
            空气质量指数AQI
          </div>
        </template>
        <el-tag size="large" :color="aqiTag.aqiColor" class="mr-4" effect="dark"
          >{{ aqiTag.aqiLevel }} {{ aqiTag.aqiLevelDes }}</el-tag
        >
        <el-tag size="large" type="warning" class="mr-4"
          >{{ aqiTag.aqiHealthImpact }}
        </el-tag>
        <el-tag size="large" type="info">{{ aqiTag.aqiTakeMeasure }} </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            情况描述
          </div>
        </template>
        {{ useFeedbackInfoStoreHook().aqiFeedback.fbInfo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <FullScreen />
            </el-icon>
            详情图片
          </div>
        </template>
        <el-image
          v-for="item in urlList"
          :key="item.index"
          :src="item"
          style="width: 100px; height: 100px"
          class="m-2"
          :preview-src-list="[item]"
        />
      </el-descriptions-item>
    </el-descriptions>

    <el-divider content-position="left" border-style="dashed"
      ><h4 style="color: dimgrey">指派详情</h4></el-divider
    >
    <div v-show="useFeedbackInfoStoreHook().aqiFeedback.fbAssignState === 0">
      <el-alert
        title="该反馈还未进行任务指派，请尽快指派网格员实地检测！"
        type="warning"
        show-icon
        :closable="false"
        center
      />
      <el-button
        effect="dark"
        type="success"
        style="width: 100%"
        class="mt-4"
        @click="router.push('/assign')"
        >立即指派</el-button
      >
    </div>
    <div v-show="useFeedbackInfoStoreHook().aqiFeedback.fbAssignState === 1">
      <el-divider content-position="left" border-style="dashed"
        ><h4 style="color: dimgrey">网格员详情</h4></el-divider
      >
      <el-descriptions class="mb-4" :column="3" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <user />
              </el-icon>
              网格员姓名
            </div>
          </template>
          {{ useFeedbackInfoStoreHook().inspector.insName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"><Odometer /></el-icon>
              网格检测员实地检测数据
            </div>
          </template>
          {{ convertLevelToChinese(useFeedbackInfoStoreHook().aqiValue) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <WarnTriangleFilled />
              </el-icon>
              CO浓度
            </div>
          </template>
          {{
            useFeedbackInfoStoreHook().result.aqimrCoValue !== null
              ? useFeedbackInfoStoreHook().result.aqimrCoValue + "ug/m³"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"> <WarnTriangleFilled /> </el-icon>
              SO2浓度
            </div>
          </template>
          {{
            useFeedbackInfoStoreHook().result.aqimrSo2Value !== null
              ? useFeedbackInfoStoreHook().result.aqimrSo2Value + "ug/m³"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle"> <WarnTriangleFilled /> </el-icon>
              PM2.5浓度
            </div>
          </template>
          {{
            useFeedbackInfoStoreHook().result.aqimrPmValue !== null
              ? useFeedbackInfoStoreHook().result.aqimrPmValue + "ug/m³"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <iphone />
              </el-icon>
              网格员电话
            </div>
          </template>
          {{ useFeedbackInfoStoreHook().inspector.insTel }}
          <el-icon
            class="copy-btn"
            style="color: dodgerblue; margin-left: 8px"
            onmouseout="this.style.color='dodgerblue'"
            onmouseover="this.style.color='gray'"
            @click="copyPhone(`${useFeedbackInfoStoreHook().inspector.insTel}`)"
            ><CopyDocument
          /></el-icon>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <office-building />
              </el-icon>
              家庭住址
            </div>
          </template>
          {{ useFeedbackInfoStoreHook().inspector.insAddress }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { format } from "date-fns";
import { priceUppercase } from "@pureadmin/utils";
import type { PlusColumn } from "plus-pro-components";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  PriceTag,
  CopyDocument,
  Clock,
  Odometer,
  FullScreen,
  WarnTriangleFilled
} from "@element-plus/icons-vue";
import ClipboardJS from "clipboard";
import { message } from "@/utils/message";
import { useFeedbackInfoStoreHook } from "@/store/modules/feedbackInfo";
import "animate.css";
import router from "@/router";

defineOptions({
  name: "FeedbackInfo"
});

const aqiTag = ref({
  aqiLevel: "一",
  aqiLevelDes: "优",
  aqiColor: "#5FB878",
  aqiHealthImpact: "健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病",
  aqiTakeMeasure:
    "儿童、老年人和病人应当留在室内，避免体力消耗，一般人群应避免户外活动"
});

const activeStep = ref(1);
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px"
  };
  return {
    marginRight: marginMap["default"] || marginMap.default
  };
});

function getGenter(gender: number) {
  if (gender === 0) {
    return "男";
  } else {
    return "女";
  }
}

function copyPhone(data: string) {
  let clipboard = new ClipboardJS(".copy-btn", {
    text: () => {
      //返回需要复制的字符串
      return data;
    }
  });
  clipboard.on("success", () => {
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboard.destroy();
  });

  message("已复制", { type: "success" });
}
const urlList = ref(useFeedbackInfoStoreHook().imageUrl);

onMounted(() => {
  // urlList.value = useFeedbackInfoStoreHook().imageUrl;
  setTimeout(() => {
    if (useFeedbackInfoStoreHook().aqiFeedback.fbAssignState === 1) {
      activeStep.value = 2;
    } else {
      activeStep.value = 1;
    }
  }, 500);
});

// 定义一个辅助函数，将数字转换为中文
const convertLevelToChinese = (level: number): string => {
  switch (level) {
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
    default:
      return "";
  }
};
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}
.animate__animated.animate__fadeInLeft {
  --animate-duration: 1s;
}
</style>
